<template>
    <div class="boxItem">
    <div class="heads">

        <img :src="store.dataList== null ?images :store.dataList.headIcon " alt="" @click="toUser">
        
        <div style="color: aliceblue;position: absolute;top: 13%;left: 30%;" @click="toUser">
            {{ store.dataList == null ?'立即登录':store.dataList.nickName }}</div>
    </div>

    <div style="background-color: darkgray ;height: 10px;opacity: .3;"></div>

    <div class="bt" @click="toSetting" style="margin-top: 30px;display: flex; position: relative;background-color: aqua;">
        <img src="../assets/sz.png" alt="" style="width: 20px;height: 20px;position: absolute;top: 0;left: 20px;">
        <div style="position:absolute ;top: 0;left: 60px;">设置</div>
        <img src="../assets/yzt.png" style="position: absolute;top: 0;right: 20px;width: 6px;height: 10px;">
    </div>
</div>
</template>>

<script setup>
import { onMounted, ref } from 'vue';
import router from '../router';
import listStore from "../store/index"
import image from "../assets/tx.png"

const images = ref(image)
 
const store = listStore()
onMounted(()=>{
    store.bottom = true
})

// 点击设置回调
const toSetting = (()=>{
     // 判断用户数据为空的时候跳转到登录页面
     if(!store.dataList) {
        console.log("用户没登录");
        router.push("/user")
    
    } else {
        router.push({name:"setting"})
    }
   
})

// 点击img 和 立即登录回调
const toUser = (()=>{

    // 判断用户数据为空的时候跳转到登录页面
    if(!store.dataList) {
        console.log("用户没登录");
        router.push("/user")
    }
    
})

</script>

<style scoped>
.heads {
    display: flex;
    background: url(../assets/bg.png);
    height: 200px;
    text-align: center;
    background-size: cover;
}
.heads img {
    width: 63px;
    height: 63px;
    border-radius: 35px;
    margin-right: 20px;
    border: 2px solid #fff;
    position: absolute;
    top: 10%;
    left: 20px;
}

</style>

